<template>
	<nav-bar leftIcon="left" :rightText="$t('兌換記錄')" @clickRight="jumpSet"></nav-bar>
	<view class="main">
		<view class="top">
			<view class="title">
				{{ $t('兌換') }}
			</view>
			<view class="titleMs">
				{{ $t('请输入你要转出的币的数量') }}
			</view>
		</view>
		<view v-if="type == 0">
			<view class="contentMain">
				<view class="msText">
					<view class="text">
						{{ $t('轉出') }}
					</view>
					<view class="ms">
						{{ $t('餘額') }}：{{ moneyNum.usdtAmount }}
					</view>
				</view>
			</view>
			<view class="moneyHuan">
				<view class="moneyType" @click="handleZh">
					<image src="@/assets/exchange/usdt.png" class="img" />
					<view class="name">
						USDT
					</view>
				</view>
				<view class="numMoney">
					<input style="color: #fff;text-align: right;" :placeholder="`1U = ${dhNum.cfpRatio}CFP`"
						@input="onKeyInput" @blur="onBlur" type="number" v-model="formData.exchangeUsdt" maxlength="8" />
				</view>
			</view>
			<image src="@/assets/exchange/zh.png" class="zhImg" @click="handleZh" />
			<view class="contentMain">
				<view class="msText">
					<view class="text">
						{{ $t('接收') }}
					</view>
					<!-- 					<view class="ms">
						{{ $t('預計接收數量') }}：446.790161
					</view> -->
				</view>
			</view>
			<view class="moneyHuan">
				<view class="moneyType" @click="handleZh">
					<image src="@/assets/exchange/cfp.png" class="img" />
					<view class="name">
						CFP
					</view>
				</view>
				<view class="numMoney" style="color: #fff;">
					{{ Math.floor(formData.exchangeUsdt * 100000 * dhNum.cfpRatio) / 100000 }}
				</view>
			</view>
		</view>
		<view v-if="type == 1">
			<view class="contentMain">
				<view class="msText">
					<view class="text">
						{{ $t('轉出') }}
					</view>
					<view class="ms">
						{{ $t('餘額') }}：{{ moneyNum.cfpAmount }}
					</view>
				</view>
			</view>
			<view class="moneyHuan">
				<view class="moneyType" @click="handleZh">
					<image src="@/assets/exchange/cfp.png" class="img" />
					<view class="name">
						CFP
					</view>
				</view>
				<view class="numMoney">
					<input style="color: #fff;text-align: right;" :placeholder="`1CFP = ${dhNum.usdtRatio}U`"
						@input="onKeyInput" @blur="onBlur" type="number" v-model="formData.exchangeCfp" maxlength="8" />
				</view>
			</view>
			<image src="@/assets/exchange/zh.png" class="zhImg" @click="handleZh" />
			<view class="contentMain">
				<view class="msText">
					<view class="text">
						{{ $t('接收') }}
					</view>
					<!-- 					<view class="ms">
						{{ $t('預計接收數量') }}：446.790161
					</view> -->
				</view>
			</view>
			<view class="moneyHuan">
				<view class="moneyType" @click="handleZh">
					<image src="@/assets/exchange/usdt.png" class="img" />
					<view class="name">
						USDT
					</view>
				</view>
				<view class="numMoney" style="color: #fff;">
					{{ Math.floor(formData.exchangeCfp * 100000 * dhNum.usdtRatio) / 100000 }}
				</view>
			</view>
		</view>
		<view class="btn-sub" @click="handleDh">
			{{ $t('確認兌換') }}
		</view>
		<uni-popup ref="inputDialog" type="dialog" v-if="!typePass">
			<uni-popup-dialog ref="inputClose" mode="input" :title="$t('輸入您的交易密碼')" :placeholder="$t('請輸入')"
				@confirm="dialogInputConfirm" :value="formData.payPassword" :cancelText="$t('取消')"
				:confirmText="$t('確認')"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog" v-if="typePass">
			<uni-popup-dialog ref="inputClose" mode="input" :title="$t('輸入您的谷歌密鑰')" :placeholder="$t('請輸入')"
				@confirm="dialogInputConfirm" :value="formData.payPassword" :cancelText="$t('取消')"
				:confirmText="$t('確認')"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import {
	computed,
	onMounted,
	ref,
	reactive,
	nextTick
} from 'vue'
import {
	onShow
} from "@dcloudio/uni-app"
import {
	jump
} from '@/utils/common.js'
import apiFn from '@/hooks/myCirculation.js'
const {
	addUserAroundFlow,
	getMyFlowMoney
} = apiFn()
import i18n from '@/locale/index'
const moneyNum = ref({})
const typePass = ref(false)
const rechargeMoney = ref('')
const type = ref(0)
const inputDialog = ref()
const valueText = ref('')
const dhNum = ref({})
const formData = ref({
	userId: uni.getStorageSync('setUserInfo').userId, //用户UserId
	payPassword: '',
	exchangeUsdt: '',
	exchangeCfp: ''
})
const jumpSet = () => {
	uni.navigateTo({
		url: "/pages/rechaRechargeUSDT/rechaRechargeUSDT"
	})
}
const onKeyInput = async (e) => {
	await nextTick(() => {
		if (type.value == 0) {
			formData.value.exchangeCfp = Number(e.detail.value)
			formData.value.exchangeCfp = (e.detail.value.match(/^\d*(\.?\d{0,5})/g)[0]) || null
		} else {
			formData.value.exchangeUsdt = Number(e.detail.value)
			formData.value.exchangeUsdt = (e.detail.value.match(/^\d*(\.?\d{0,5})/g)[0]) || null
		}

	})
}
let getStorage = async () => {
	//这是一个异步接口
	await uni.getStorage({
		key: 'googleVerificationSwitch',//本地缓存中的指定的 key
		success(res) {//接口调用的回调函数，res = {data: key对应的内容}
			typePass.value = res.data
		}
	})
}
//确认体现
const dialogInputConfirm = async (value) => {

	console.log(value.length);
	if (value.length !== 6) return uni.showToast({
		title: `${i18n.global.t('交易密碼爲6位')}!`,
		icon: 'none',
	})
	formData.value.payPassword = value
	if (type.value == 0) {
		// USDT=>SFP
		formData.value.exchangeCfp = Math.floor(formData.value.exchangeUsdt * 100000 * dhNum.value.cfpRatio) / 100000


		let actionMoney = await getMyFlowMoney('usdt/exchangeCfp', formData.value)
	} else {
		formData.value.exchangeUsdt = Math.floor(formData.value.exchangeCfp * 100000 * dhNum.value.usdtRatio) / 100000
		let actionMoney = await getMyFlowMoney('usdt/exchangeUsdt', formData.value)
	}

	uni.showToast({
		title: `${i18n.global.t('兌換成功')}!`,
		icon: 'none',
	})
	uni.switchTab({
		url: '/pages/my/my',
		success() {
			let page = getCurrentPages().pop(); //跳转页面成功之后
			if (!page) return;
			page.onShow(); //如果页面存在，则重新刷新页面
		}
	})
}
const userInfo = async () => {
	let list = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let data = await getMyFlowMoney('user/personalInfo', list)
	typePass.value = data.googleVerificationSwitch
}

const _onBlur = (e) => {
	if (!e.detail.value && type.value == 0) {
		uni.showToast({ title: `${i18n.global.t('數量不能為空')}!`, icon: 'none', })
	}
	if (!e.detail.value && type.value == 1) {
		uni.showToast({ title: `${i18n.global.t('數量不能為空')}!`, icon: 'none', })
	}
	if (e.detail.value < 1 && type.value == 0) {
		uni.showToast({ title: `${i18n.global.t('數量不能小於一')}!`, icon: 'none', })
	}
	if (e.detail.value < 1 && type.value == 1) {
		uni.showToast({ title: `${i18n.global.t('數量不能小於一')}!`, icon: 'none', })
	}
}
const ye = async () => {
	let list = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let actionMoney = await getMyFlowMoney('usdtInfo/getUsdtBalance', list)
	// console.log('111111', actionMoney)
	moneyNum.value = actionMoney
}
const duihuanbili = async () => {
	let list = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let actionMoney = await getMyFlowMoney('usdtInfo/exchangeRatio', list)
	console.log('111111', actionMoney)
	// moneyNum.value = actionMoney
	dhNum.value = actionMoney
}
onShow(async () => {
	ye()
	duihuanbili()
	userInfo()
})
const handleDh = () => {
	// userInfo()
	if (!formData.value.exchangeUsdt || !formData.value.exchangeCfp) {
		return uni.showToast({
			title: `${i18n.global.t('數量不能為空')}!`,
			icon: 'none',
		})
	}
	if (formData.value.exchangeUsdt < 1 && type.value == 0) {
		return uni.showToast({
			title: `${i18n.global.t('數量不能小於')} 1 !`,
			icon: 'none',
		})

	}
	if (formData.value.exchangeUsdt < 1 && type.value == 1) {
		return uni.showToast({
			title: `${i18n.global.t('數量不能小於')} 1 !`,
			icon: 'none',
		})

	}
	if (formData.value.exchangeUsdt > moneyNum.value.usdtAmount && type.value == 0) {
		return uni.showToast({
			title: `${i18n.global.t('USDT餘額不足')}!`,
			icon: 'none',
		})
	}
	if (formData.value.exchangeCfp > moneyNum.value.cfpAmount && type.value == 1) {
		return uni.showToast({
			title: `${i18n.global.t('CFP餘額不足')}!`,
			icon: 'none',
		})
	}
	if (!uni.getStorageSync('setUserInfo').payPasswordStatus) {
		uni.navigateTo({
			url: '/pages/transactionPassword/transactionPassword'
		})
		uni.showToast({
			title: `${i18n.global.t('請先設置交易密碼')}!`,
			icon: 'none'
		})
		return
	}
	inputDialog.value.open()
}
const handleZh = () => {
	type.value = type.value == 1 ? 0 : 1
	ye()
}
</script>

<style scoped>
.top {
	margin-top: 120rpx;
}

.btn-sub {
	margin-top: 50rpx;
	width: 690rpx;
	height: 90rpx;
	/* background: linear-gradient(90deg, #5641DD, #B1A6FD); */
	background: linear-gradient(90deg, #039BDA, #0DF2ED);
	border-radius: 45rpx;
	text-align: center;
	line-height: 90rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
}

.zhImg {
	width: 85rpx;
	height: 85rpx;
	display: block;
	margin: 0 auto;
	margin-top: 70rpx;
	margin-bottom: -30rpx;
}

.moneyHuan {
	padding: 10rpx 30rpx 10rpx 0;
	background-color: #0b2e3e;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 25rpx;
	margin-top: 25rpx;
}

.moneyType {
	display: flex;
	align-items: center;
	background-color: #18171E;
	padding: 20rpx 0;
	margin-left: 10rpx;
	width: 220rpx;
	justify-content: center;
	border-radius: 25rpx;
}

.name {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	margin-left: 20rpx;
}

.img {
	width: 70rpx;

	height: 70rpx;
	display: block;
}

.contentMain {
	margin-top: 90rpx;
}

.ms {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #848686;
}

.text {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
}

.msText {
	margin-top: 25rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.title {
	font-size: 42rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
}

.titleMs {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 300;
	color: #848686;
	margin-top: 10rpx;
}
</style>